<template>
  <view class="pet-map">
    <view class="pet-fr-it" @click="goToOtherPage(`/user/center?id=${props.item.customerId}`)">
      <image class="avater" :src="props.item.face"/>
      <view class="mai-c">
        <view class="name-c">
          <view class="n-lf">
            <text class="nick">
              {{ props.item.nickname }}
            </text>
            <text style="margin-left: 20rpx">
              {{ props.item.sex === 1 ? '男' : props.item.sex === 2 ? '女' : '' }}
            </text>
          </view>
          <view class="texs-lc">{{ getDistance(props.item.distance) }}</view>
        </view>
        <!-- <view class="dynamic-state u-line-1">{{ props.item.petNames }}</view> -->
      </view>
    </view>
    <view class="cus-pet-list">
      <view class="title u-center">
        Ta的爱宠<view class="line"></view>
      </view>
      <scroll-view class="pet-list" scroll-x>
        <view class="pet-itm" v-for="pet in petList" :key="pet.id" @click="goToOtherPage(`/user/petHome?userId=${pet.customerId}&petId=${pet.id}`)">
          <view style="padding-left:90rpx">
            <img :src="$countImgUrl(pet.face)" class="img">
            <view class="right-context">
              <view class="name">
                <view style="max-width:300rpx" class="u-line-1">{{pet.name}}</view>
                <img :src="`https://img.qumoyugo.com/webimgbg/picopino_icon_sex_new_${pet.sex}.png`" alt="" class="img-sex" v-if="pet.sex">
              </view>
              <view class="align-c">
                <view class="u-line-1">{{pet.breedName}}（{{pet.age}} {{ pet.weight }} kg）</view>
              </view>
            </view>
          </view>
        </view>
        <view class="no-data" v-if="petList.length === 0">
          他还没添加爱宠
        </view>
      </scroll-view>
      <view class="dynamic" v-if="dynamicInfo.eventsId || dynamicInfo.videoId">
        <view style="display:flex;padding-top: 20rpx;" @click="goToOtherPage(dynamicInfo.activityType === 'activity' ? `/events/eventsMarket?id=${dynamicInfo.eventsId}` : `/events/eventsDetail?id=${dynamicInfo.eventsId}`)" v-if="dynamicInfo.eventsId">
          <view class="u-line-1" style="max-width: 80%">{{dynamicInfo.eventsDiffDays}}报名了“{{dynamicInfo.eventsName}}”</view>
          <view class="link">查看</view>
        </view>
        <view style="display:flex;padding-top: 20rpx;" v-if="dynamicInfo.videoId" @click="goToOtherPage(`/user/center?id=${props.item.customerId}`)">
          <view class="u-line-1">{{dynamicInfo.videoDiffDays}}发布了作品</view>
          <view class="link">查看</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
  item: {
    type: Object,
    default: () => {}
  },
  orgin: {
    type: String,
    default: ''
  }
})
const getDistance = distance => {
  distance = distance || 0
  return distance < 1 ? (distance * 1000).toFixed(2) + 'm' : distance.toFixed(2) + 'km'
}
const goToOtherPage = (url) => {
  uni.navigateTo({
    url
  })
}
const petList = computed(() => {
  return props.item?.petList || []
})
const dynamicInfo = computed(() => {
  return props.item?.dynamic || {}
})
</script>

<style scoped lang="scss">
.pet-map{
  padding: 30rpx;
  border-radius: 20rpx;
  background: #FFF;
  box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.06);
  margin-bottom: 20rpx;
}
.pet-fr-it{
  display: flex;
  .avater{
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 5rpx solid #fff;
    margin-top: -65rpx;
  }
  .mai-c{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    padding-left: 20rpx;
  }
  .name-c{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .nick{
      font-size: 32rpx;
      font-weight: bold;
      color: #000;
    }
    .n-lf{
      display:flex;
      align-items:center;
      line-height: 28rpx;
      flex: 1;
      font-size: 24rpx;
      color: #737373;
    }
  }
  .dynamic-state{
    font-size: 24rpx;
    color: #999;
    line-height: 30rpx;
  }
  .texs-lc{
    color: #000;
    font-size: 24rpx;
  }
}
.cus-pet-list{
  .title{
    color: #414141;
    font-size: 24rpx;
    margin: 20rpx 0;
  }
  .line{
    height: 1px;
    background-color: #E1E1E1;
    margin-left: 30rpx;
    flex: 1;
  }
}
.pet-list{
  height: 80rpx;
  white-space: nowrap;
  margin-bottom: 20rpx;
}
.pet-itm{
  font-size: 24rpx;
  height: 80rpx;
  width: 60%;
  margin-right: 20rpx;
  display: inline-block;
  .img{
    border-radius: 20rpx;
    width: 80rpx;
    height: 80rpx;
    float: left;
    margin-left: -90rpx;
  }
  .right-context{
    // flex: 1;
    padding: 6rpx 0 6rpx 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 80rpx;
  }
  .img-sex{
    width: 26rpx;
    height: 26rpx;
    margin-left: 10rpx;
  }
  .name {
    display: flex;
    color: #000000;
    font-weight: bold;
    align-items: center;
  }
  .align-c{
    font-size: 22rpx;
    color: #737373;
  }
}
.no-data{
  width: 162rpx;
  height: 80rpx;
  background: url(https://img.qumoyugo.com/img/HV9J5UIS1MPFH5D9Y0I5F1713510421813.png) no-repeat;
  background-size: 100%;
  font-size: 22rpx;
  color: #737373;
  padding: 48rpx 0 0 95rpx;
}
.dynamic{
  border-top: 1px solid #E1E1E1;
  color: #414141;
  font-size: 22rpx;
  line-height: 22rpx;
  .link{
    color: #3289CA;
    padding-left: 10rpx;
  }
}
</style>
